<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <link rel="stylesheet" href="../common.css" />
  <style>
    .nav-item {
      width: 150px;
      height: 50px;
      line-height: 50px;
      text-align: center;
      position: relative;
      background: linear-gradient(
        270deg,
        rgba(0, 192, 250, 0) 0%,
        rgba(0, 192, 250, 0.45) 49%,
        rgba(0, 192, 250, 0) 100%
      );
      font-size: 15px;
      color: #fff;
      font-weight: bold;
      text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
      transform-style: preserve-3d;
      transition: 0.5s;
      transform-origin: 50% 0;
      cursor: pointer;
    }
    .nav-item::before {
      content: "";
      position: absolute;
      background: orange;
      width: 100%;
      height: 50px;
      left: 100%;
      top: 0;
      transform-origin: 0 0;
      transform: rotateX(-90deg) translateX(-9em) translateZ(3em);
    }
    .nav-item:hover {
      transform: rotateY(-90deg) translateX(-4.5em) translateZ(4.5em);
    }
  </style>

  <body>
    <nav>
      <div data-nav="首页" class="nav-item">首页</div>
      <div data-nav="我的" class="nav-item">我的</div>
      <div data-nav="苏苏" class="nav-item">苏苏</div>
      <div data-nav="嘻嘻嘻" class="nav-item">嘻嘻嘻</div>
    </nav>
  </body>
</html>
